<%--
  Created by IntelliJ IDEA.
  User: 29012
  Date: 2021/9/26
  Time: 18:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>苏鸿云课</title>
    <%--  jquery-3.6.0.min.js  --%>
    <script src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
    <%--  index.css  --%>
    <link href="${pageContext.request.contextPath}/css/index.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/layui/css/layui.css" rel="stylesheet">
    <%--  header.css  --%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/header/header.css">
    <%--  设置页面左上角浏览器图标  --%>
    <link rel="shortcut icon"  href="image/zhengKe.ico" type="image/x-icon" />
    <%--  header.js  --%>
    <script src="${pageContext.request.contextPath}/js/header/header.js"></script>
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>

</head>
<body>

<c:if test="${empty xianshipintuanCourse}">
    <script>
        location.href = "${pageContext.request.contextPath}/index";
    </script>
</c:if>

<div class="header">
    <div id="nav">
        <div id="menu">
            <!-- logo -->
            <div id="logo_img">
                <a href="${pageContext.request.contextPath}/index">
                    <svg t="1634123912096" class="icon" viewBox="0 0 1335 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="9038" width="60" height="60">
                        <path d=" M1296.918261
                                267.130435c-199.902609-89.043478-400.695652-170.963478-600.153044-258.671305a79.693913 79.693913
                                0 0 0-62.330434 0C438.53913 94.386087 238.636522 178.086957 44.521739 260.897391c-20.925217
                                8.45913-41.850435 16.918261-41.850435 44.521739s20.925217 37.398261 41.850435
                                44.52174c181.648696 81.92 365.078261 156.716522 548.062609 240.417391a142.024348 142.024348 0 0
                                0 146.031304 0 489.73913 489.73913 0 0 1 83.255652-37.843478c116.646957-49.864348
                                229.286957-99.728696 350.386087-150.038261v421.175652c0 24.932174 8.013913 33.391304 32.946087
                                33.391304s33.391304-4.452174 33.391305-33.391304c0-125.106087
                                4.452174-254.21913-4.006957-379.325217 0-49.864348 8.45913-83.255652
                                62.330435-95.72174a41.850435 41.850435 0 0 0
                                38.733913-41.850434c0-24.932174-17.808696-33.391304-38.733913-39.624348z" p-id="9039"></path>
                        <path d=" M1088.556522 548.507826c0-29.384348-8.013913-29.384348-28.939131-20.925217-112.64
                                51.2-225.28 95.721739-333.467826 146.031304a143.805217 143.805217 0 0 1-116.646956 0C496.862609
                                623.304348 384.222609 578.782609 272.027826
                                527.582609c-20.925217-8.45913-24.932174-4.006957-24.932174 16.918261V712.347826a211.478261
                                211.478261 0 0 0 141.579131 229.286957 640.222609 640.222609 0 0 0 570.768695-8.459131
                                211.923478 211.923478 0 0 0 129.113044-222.608695c-4.006957-53.871304 0-107.742609
                                0-162.059131z" p-id="9040"></path>
                    </svg>
                </a>
            </div>

            <!-- 首页 -->
            <div class="jump">
                <a href="${pageContext.request.contextPath}/index">首页</a>
            </div>

            <!-- 全部课程 -->
            <div class="jump">
                <a href="${pageContext.request.contextPath}/course">全部课程</a>
            </div>

            <!-- 苏鸿社区 -->
            <div class="jump">
                <a href="${pageContext.request.contextPath}/community?label=推荐">苏鸿社区</a>
            </div>

            <!-- 搜索 -->
            <div class="function search">
                <input type="text" placeholder="请输入关键字..." />
                <div class="header_hot">
                    <a href="#" class="hot_info">Vue</a>
                    <a href="#" class="hot_info">Python</a>
                </div>
                <a href="#" id="search_icon">
                    <svg t="1634122309089" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="3764" width="20" height="20">
                        <path d=" M953.474215 908.234504l-152.576516-163.241391c61.92508-74.48211 95.81186-167.36973
                                    95.81186-265.073744 0-229.294809-186.63531-415.930119-416.102133-415.930119-229.294809
                                    0-415.930119 186.63531-415.930119 415.930119s186.63531 415.930119 415.930119
                                    415.930119c60.032925 0 118.00168-12.55703 172.186125-37.327062 16.169326-7.396607
                                    23.221905-26.318159
                                    15.825298-42.315471-7.396607-16.169326-26.318159-23.221905-42.315471-15.825298-45.927768
                                    20.813707-94.951789 31.478582-145.695952 31.478582-194.031917
                                    0-351.94087-157.908953-351.94087-351.94087 0-194.031917 157.908953-351.94087
                                    351.94087-351.94087 194.031917 0 351.94087 157.908953 351.94087 351.94087 0
                                    91.339493-34.918864 177.86259-98.048043 243.743995-12.213002 12.729044-11.868974 33.026709
                                    0.860071 45.239711 1.032085 0.860071 2.236183 1.204099 3.268268 2.064169 0.860071 1.204099
                                    1.376113 2.752226 2.408198 3.956325l165.477574 177.00252c6.192508 6.70855 14.793214
                                    10.148833 23.393919 10.148833 7.912649 0 15.653284-2.92424 21.845792-8.600706C964.827146
                                    941.433227 965.515202 921.135562 953.474215 908.234504z" p-id="3765" id="search-img">
                        </path>
                    </svg>
                </a>
            </div>

            <!-- 登录注册 -->
            <div class="function ">
                <div class="consumer">
                    <!-- 登录/注册  -->
                    <c:if test="${empty ServiceResponse}">
                        <a href="${pageContext.request.contextPath}/login/login.jsp" class="head portrait" class="login">
                            <svg t="1634123426498" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="6398" width="30" height="30">
                                <path d=" M880.182 987.568H143.818C98.705 987.568 62 952.882 62 910.245V801.52c0-122.986
                                110.113-223.042 245.455-223.042h409.09C851.887 578.478 962 678.533 962 801.52v108.726c0
                                42.636-36.704 77.322-81.818 77.322z m-736.364-82.197l736.363
                                0.379V801.52c0-77.873-73.408-141.224-163.637-141.224h-409.09c-90.228 0-163.636 63.351-163.636
                                141.224v103.851zM511.67 547.796c-140.984 0-255.682-114.697-255.682-255.682 0-140.984
                                114.697-255.682 255.682-255.682 140.985 0 255.682 114.697 255.682 255.682 0.001 140.985-114.697
                                255.682-255.682 255.682z m0-429.546c-95.871 0-173.864 77.993-173.864 173.864S415.8 465.978
                                511.67 465.978s173.864-77.993 173.864-173.864S607.541 118.25 511.67 118.25z" p-id="6399">
                                </path>
                            </svg>
                        </a>
                    </c:if>
                    <c:if test="${!empty ServiceResponse}">
                        <a href="${pageContext.request.contextPath}/mycourse" class="consumer_portrait">
                            <img src="http://${ServiceResponse.data.consumerProfile}" alt="">
                        </a>
                        <!-- 注销 -->
                        <a href="${pageContext.request.contextPath}/logout" class="logout">
                            <svg t="1634123313659" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="5401" width="30" height="30">
                                <path d=" M424.19 675.833l64.823 64.823 229.869-229.869-229.869-229.869-64.823 64.823 118.612
                                119.072H98.236v91.948h444.567L424.19 675.833zM833.817 97.022H190.183c-51.031 0-91.948
                                41.376-91.948 91.948v183.895h91.948V188.97h643.633v643.633H190.183V648.708H98.236v183.895c0
                                50.571 40.917 91.948 91.948 91.948h643.633c50.571 0 91.948-41.376
                                91.948-91.948V188.97c-0.001-50.571-41.377-91.948-91.948-91.948z" p-id="5402"></path>
                            </svg>
                        </a>
                    </c:if>
                </div>
            </div>

        </div>
    </div>
</div>
<div class="banner_box">
    <div class="g_banner">
        <div class="submenu">
            <div class="item_a">
                <span class="title">前端开发:</span>
                <span class="sub_title">HTML5 / Java / Go</span>
                <i class="imv2-arrow1_r"></i>
            </div>
            <div class="item_b">
                <span class="title">后端开发:</span>
                <span class="sub_title">Java / Python / Go</span>
                <i class="imv2-arrow1_r"></i>
            </div>
            <div class="item_b">
                <span class="title">移动开发:</span>
                <span class="sub_title">Flutter / Android / iOS </span>
                <i class="imv2-arrow1_r"></i>
            </div>
            <div class="item_b">
                <span class="title">计算机基础:</span>
                <span class="sub_title">算法 / 数学 / 数据库</span>
                <i class="imv2-arrow1_r"></i>
            </div>
            <div class="item_b">
                <span class="title">前沿技术:</span>
                <span class="sub_title">AI / 大数据 / 数据分析</span>
                <i class="imv2-arrow1_r"></i>
            </div>
            <div class="item_b">
                <span class="title">测试运维:</span>
                <span class="sub_title">自动化测试 / 容器</span>
                <i class="imv2-arrow1_r"></i>
            </div>
            <div class="item_b">
                <span class="title">更多方向:</span>
                <span class="sub_title">产品设计 / UI设计 / 游戏</span>
                <i class="imv2-arrow1_r"></i>
            </div>
        </div>
<%--        <div class="container">--%>
            <div class="layui-carousel" id="test1" lay-filter="test1" style="float: right;">
                <div carousel-item="">
                    <div>
                        <a href="#">
                            <img src="${pageContext.request.contextPath}/images/index/index_lunbo_1.jpg" class="lunbo_img">
                        </a>
                    </div>
                    <div>
                        <a href="#">
                            <img src="${pageContext.request.contextPath}/images/index/index_lunbo_2.jpg" class="lunbo_img">
                        </a>
                    </div>
                    <div>
                        <a href="#">
                            <img src="${pageContext.request.contextPath}/images/index/index_lunbo_3.jpg" class="lunbo_img">
                        </a>
                    </div>
                    <div>
                        <a href="#">
                            <img src="${pageContext.request.contextPath}/images/index/index_lunbo_4.jpg" class="lunbo_img">
                        </a>
                    </div>
                    <div>
                        <a href="#">
                            <img src="${pageContext.request.contextPath}/images/index/index_lunbo_5.jpg" class="lunbo_img">
                        </a>
                    </div>
                </div>
            </div>
<%--        </div>--%>
    </div>
    <div class="system-class-show">
        <a href="" class="show-box">
            <img src="${pageContext.request.contextPath}/images/index/describe_1.png" alt="">
            <div class="describe">
                <h4>Java工程师</h4>
                <p>综合就业率第一</p>
            </div>
        </a>
        <a href="" class="show-box">
            <img src="${pageContext.request.contextPath}/images/index/describe_2.png" alt="">
            <div class="describe">
                <h4>前端工程师</h4>
                <p>入门快、就业快</p>
            </div>
        </a>
        <a href="" class="show-box">
            <img src="${pageContext.request.contextPath}/images/index/describe_3.png" alt="">
            <div class="describe">
                <h4>Python工程师</h4>
                <p>应用领域最广泛</p>
            </div>
        </a>
        <a href="" class="show-box">
            <img src="${pageContext.request.contextPath}/images/index/describe_4.png" alt="">
            <div class="describe">
                <h4>Web前端架构师</h4>
                <p>培养前端P7级架构师</p>
            </div>
        </a>
        <a href="" class="show-box">
            <img src="${pageContext.request.contextPath}/images/index/describe_5.png" alt="">
            <div class="describe">
                <h4>Java架构师P7</h4>
                <p>千万级电商架构0-100</p>
            </div>
        </a>
        <div class="line"></div>
        <a href="" class="all_btn">
            <div class="mini_title">体系课</div>
            <div class="more">more</div>
        </a>

    </div>
</div>
<div class="Hot">
    <div class="center_top_body">
        <div class="left_head">
            <img src="${pageContext.request.contextPath}/images/index/title-bg3.png" alt="">
        </div>
    </div>
    <div class="center_body">
        <c:forEach items="${xinshanghaokeCourseResponse.data}" var="course">
            <a href="${pageContext.request.contextPath}/learn/${course.courseId}" class="item">
                <div class="course">
                    <img src="${course.courseMainImg}" alt="">
                </div>
                <p class="title_course">${course.courseName}</p>
                <p class="difficulty">${course.courseDifficulty} · ${course.courseLearnNumber}人报名 </p>
                <div class="bottom">
                    <span class="price">¥ ${course.coursePrice}</span>
                </div>
            </a>
        </c:forEach>
    </div>
</div>
<div class="Tap">
    <div class="center_top_body">
        <div class="left_head">
            <img src="${pageContext.request.contextPath}/images/index/title-bg4.png" alt="">
        </div>
        <div class="center_body">
            <c:forEach items="${jinzhanbixueCourseResponse.data}" var="course">
                <a href="${pageContext.request.contextPath}/learn/${course.courseId}" class="item">
                    <div class="course">
                        <img src="${course.courseMainImg}" alt="">
                    </div>
                    <p class="title_course">${course.courseName}</p>
                    <p class="difficulty">${course.courseDifficulty} · ${course.courseLearnNumber}人报名 </p>
                    <div class="bottom">
                        <span class="price">¥ ${course.coursePrice}</span>
                    </div>
                </a>
            </c:forEach>
        </div>
    </div>
</div>
<div class="Limited_time_puzzle">
    <div class="center_top_body">
        <div class="left_head">
            <img src="${pageContext.request.contextPath}/images/index/title-bg6.png" alt="">
        </div>
        <div class="center_body">
            <c:forEach items="${xianshipintuanCourse.data}" var="course">
                <a href="" class="item">
                    <div class="course">
                        <img src="${pageContext.request.contextPath}/images/course/course_img_1.png" alt="">
                    </div>
                    <p class="title_course">${course.courseName}</p>
                    <p class="difficulty">${course.courseDifficulty} · ${course.courseLearnNumber}人报名 </p>
                    <div class="bottom">
                        <span class="tag">三人拼团</span>
                        <span class="price">¥ 1.00</span>
                        <span class="price_1">¥ ${course.coursePrice}</span>
                    </div>
                </a>
            </c:forEach>

        </div>
    </div>
</div>
<div class="footer"></div>
<script>
    layui.use(['carousel', 'form'], function() {
        var carousel = layui.carousel
            , form = layui.form;

        //常规轮播
        carousel.render({
            elem: '#test1'
            , arrow: 'always'
        });

        //改变下时间间隔、动画类型、高度
        carousel.render({
            elem: '#test2'
            , interval: 1800
            , anim: 'fade'
            , height: '120px'
        });
    });
</script>
</body>
</html>
